<template>
	<view class="row-image-list">
	    <image class="small-image" mode="aspectFill" :src="list[0].url"></image>
	    <image class="big-image" mode="aspectFill" :src="list[1].url"></image>
	    <image class="big-image" :src="list[2].url"></image>
	    <image class="small-image" mode="aspectFill" src="../../static/image/see_more.png" ></image>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: {
			list: {
				type: Array
			}
		},
		methods: {
			toDetail: function(t, n) {
				e.setStorageSync("tempDetailList", this.list), e.navigateTo({
					url: "/pages/wallpaperDetail/wallpaperDetail?index=" + n
				});
			},
			toList: function() {
				a.topage("/pages/wallpaperList/todayHotList");
			}
		}
	}
</script>

<style>
.row-image-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-right: 30rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
	margin-top: -20rpx;
}

.small-image {
    max-width: 220rpx;
	margin-top: 20rpx;
}

.big-image,.small-image {
    height: 300rpx;
    background-color: #282828;
    border-radius: 12rpx;
	margin-top: 20rpx;
}

.big-image {
    min-width: 450rpx;
	width:calc(50% - 250rpx);
}
@media screen and (min-width:1500rpx){
	.big-image,.small-image {
		height: 900rpx;
	}
	.small-image{
		max-width:660rpx;
	}
	.big-image{
		width:calc(50% - 680rpx);
	}
}
</style>
